<script lang='ts' setup>
import MarkdownIt from 'markdown-it';
import changelog from '../../../../../../CHANGELOG.md?raw'

const md = new MarkdownIt();

function handleOpenLink(e: Event): void {
  const url = (e.target as Element)!.getAttribute('href');
  e.preventDefault();
  window.electron.ipcRenderer.send('open-url', url);
}

onMounted(() => {
  const links = document.querySelectorAll('.changelog-container a[href]');
  links.forEach(link => {
      link.addEventListener('click', handleOpenLink);
  });
})
</script>

<template >
  <el-card style="--el-card-padding: 0px;">
    <el-scrollbar class="changelog-container" height="400px">
      <div class="changelog-html" v-html="md.render(changelog)"></div>
    </el-scrollbar>
  </el-card>
</template>

<style scoped lang='less'>
.changelog-container {

  :deep(.el-scrollbar__view ) {
    padding: 10px 30px;
    h2 {
      margin: 20px 0px;
      a {
        color: #000;
      }
    }
    li {
      list-style: none;
      font-size: 14px;
      margin: 10px 0px;
      a {
        color: #000;
      }
    }
  }
}
</style>
